<script setup >

const menu = [
  {
    name: '关于论坛',
    path: '/about',
    children: [
      {
        name: '背景介绍',
        path: '/about/introduction' //  introduction，更符合“背景介绍”的含义
      },
      {
        name: '论坛章程',
        path: '/about/rules' //  rules，适合“章程”或“规则”
      },
      {
        name: '理事会',
        path: '/about/board' // 重复项，保留相同的 path
      },
      {
        name: '大纪事',
        path: '/about/recordevent' //  board，适合“理事会”
      },
      {
        name: '联系我们',
        path: '/about/contact' //  contact，适合“联系我们”
      }
    ]
  },
  {
    name: '科技交易',
    path: '/transactions', // /transactions，更贴合“科技交易”的概念
    children: [
      {
        name: '成果交易',
        path: '/transactions/results' //  /transactions/results，表示“成果交易”
      },
      {
        name: '需求中心',
        path: '/transactions/demands' //  /transactions/demands，表示“需求中心”
      },
      {
        name: '交易规则',
        path: '/transactions/rules' //  /transactions/rules，表示“交易规则”
      },
    ]
  },
  {
    name: '新闻中心',
    path: '/news', // 新闻中心的主路径设为/news
    children: [
      {
        name: '新闻动态',
        path: '/news/dynamics' // 新闻动态的路径设为/news/dynamics
      },
      {
        name: '声明公告',
        path: '/news/announcements' // 声明公告的路径设为/news/announcements
      },
      {
        name: '重要活动',
        path: '/news/events' // 重要活动的路径设为/news/events
      }
    ]
  },
  {
    name: '会议活动',
    path: '/events', // 会议活动的主路径设为/events
    children: [
      {
        name: '历届活动',
        path: '/events/past' // 历届活动的路径设为/events/past
      },
      {
        name: '热点活动',
        path: '/events/highlights' // 热点活动的路径设为/events/highlights
      }
    ]
  },
  {
    name: '线上展厅',
    path: '/online-exhibition', // 线上展厅的主路径设为/online-exhibition
    children: [
      {
        name: '转化案例',
        path: '/online-exhibition/case-studies' // 转化案例的路径设为/online-exhibition/case-studies
      },
      {
        name: '项目展示',
        path: '/online-exhibition/project-showcases' // 项目展示的路径设为/online-exhibition/project-showcases
      }
    ]
  },
  {
    name: '投资机构',
    path: '/investors',
    children: [
      {
        name: '机构介绍',
        path: '/investors/introductions'
      },
      {
        name: '机构动态',
        path: '/investors/news'
      },
      {
        name: '机构申请',
        path: '/investors/application'
      }
    ]
  },
  {
    name: '合作伙伴',
    path: '/partners',
    children: [
      {
        name: '合作伙伴介绍',
        path: '/partners/introductions'
      },
      {
        name: '合作伙伴动态',
        path: '/partners/news'
      },
      {
        name: '合作伙伴申请',
        path: '/partners/application'
      }
    ]
  },
]
const router = useRouter()
function changeTab(child) {
  router.replace({
    path: child.path
  })
}
</script>

<template>
  <client-only>
    <div class="bg-#b45946 h-45px lh-45px flex justify-around px-300px">
      <el-popover
        v-for="item in menu"
        :key="item.name"
        :trigger="'hover'"
        :show-arrow="false"
        popper-class="nav-popper"
        :offset="1"
      >
        <template #reference>
              <span class="nav-item  cursor-pointer">
                {{ item.name }}
              </span>
        </template>
        <template #default>
          <!--<NuxtLink v-for="child in item.children" :key="child.name" class=" nav-sub-item my-2 block w-full" :to="child.path">{{ child.name }}</NuxtLink>-->
          <!--<NuxtLink v-for="(child, childIndex) in item.children" :key="child.name" class=" nav-sub-item my-2 block w-full" :to="`${child.path}`">{{ child.name }}</NuxtLink>-->
          <div v-for="(child, childIndex) in item.children" :key="child.name" class=" nav-sub-item my-2 block w-full" @click="changeTab(child)">{{ child.name }}</div>
        </template>
      </el-popover>
    </div>
   
  </client-only>
</template>

<style scoped lang="scss">
.nav-item {
  color: white;
}
.nav-sub-item {
  color: #333;
  text-decoration: none;
  padding: 5px 0 5px 40px;
  //text-align: center;
  &:hover {
    color: #fff;
    background: #b45946;
  }
}

</style>
<style>
.nav-popper {
 /* background: transparent!important;*/
  margin: 0!important;
  padding: 0!important;
}
</style>